<!DOCTYPE html>
<title>Scrollbox</title>
<html>

	<link rel="stylesheet" href="css/leaflet.css" />
	<link rel="stylesheet" href="css/tinycarousel.css" />
	
	<script src="js/leaflet.js"></script>
	<script src="js/jquery-1.9.1.min.js"></script>
	<script src="js/jquery.tinycarousel.min.js"></script>
	
	<style>
	
		html, body, #map {
            margin: 0;
            width: 100%;
            height: 100%;
            font-family: "Roboto",Arial, Helvetica, sans-serif;
        }
        
        .flags {
            padding-top:5px;
            padding-bottom:5px;
            width:260px;
            height:100px;
            font: 14px/16px Arial, Helvetica, sans-serif;
            background: white;
            background: rgba(255,255,255,0.5);
            box-shadow: 0 0 15px rgba(0,0,0,0.2);
            border-radius: 5px;
        }
        
        .flags .number {
            font-size: 18px;
            text-align: center;
            margin: 10px 10 10px 10px;
        } 
        
        #slider1{
            margin-top: 10px;
        }
        
        #slider1 li {
            height: 30px;
            width: 30px;
            text-align:center;
            vertical-align:middle;
            
        }

		.info {
			padding: 6px 8px;
			font: 14px/16px Arial, Helvetica, sans-serif;
			background: white;
			background: rgba(255,255,255,0.8);
			box-shadow: 0 0 15px rgba(0,0,0,0.2);
			border-radius: 5px;
		}
		.info h4 {
			margin: 0 0 5px;
			color: #777;
		}
		.legend {
			line-height: 18px;
			color: #555;
		}
		.legend i {
			width: 18px;
			height: 18px;
			float: left;
			margin-right: 8px;
			opacity: 0.7;
		}
	</style>

	<body>

		<div id="map"></div>

		<script>
			function getColor(d) {
				return d > 1000 ? '#800026' : d > 500 ? '#BD0026' : d > 200 ? '#E31A1C' : d > 100 ? '#FC4E2A' : d > 50 ? '#FD8D3C' : d > 20 ? '#FEB24C' : d > 10 ? '#FED976' : '#FFEDA0';
			}

			var map = L.map('map',{
			  center:[45.5411870, 10.2194440],
			  zoom: 11
			});
			var tile_osm = "http://{s}.tile.osm.org/{z}/{x}/{y}.png";
			L.tileLayer(tile_osm, {
				attribution : '',
				minZoom : 6,
				maxZoom : 16,
				zIndex: -1,
        		timestamp: 123
			}).addTo(map);

			var legend = L.control({
				position : 'bottomright'
			});

			legend.onAdd = function(map) {

				var div = L.DomUtil.create('div', 'info legend'), grades = [0, 10, 20, 50, 100, 200, 500, 1000], labels = [];

				// loop through our density intervals and generate a label with a colored square for each interval
				for (var i = 0; i < grades.length; i++) {
					div.innerHTML += '<i style="background:' + getColor(grades[i] + 1) + '"></i> ' + grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+');
				}

				return div;
			};
            
            //legend.addTo(map);
            

            var flags = L.control({
                position : 'bottomleft'
            });

            flags.onAdd = function(map) {
                var div = L.DomUtil.create('div', '');
                div.id = "slider1";
                var title = L.DomUtil.create('div', 'number',div);
                title.innerHTML = "<div><img src='images/partecipanti.png' /></div>";
                title.id="partecipanti";
                var flags = L.DomUtil.create('div', 'viewport',div); 
                var ul = L.DomUtil.create('ul', 'overview',flags);
                return div;
            };
            
			flags.addTo(map);
			
			
			$(document).ready(function(){
			    
			    var url = "http://127.0.0.1/workspace-kepler/CEFRIEL/interface_test.php?type=partecipanti&lang=en&user=ede_info87u_u&pwd=p3d33d3_201206";
            
                $.ajax({
                    url : url,
                    type : 'GET',
                    dataType : 'json',
                    success : function(data) {
                        var size = data.length;
                        $("#partecipanti").append(size);
                        for(var i=0;i<size;i++){
                            $("#slider1 ul").append($("<li>").append($("<img style='border:none;display:inline-block'>")
                                .attr( "src", "data:image/gif;base64,"+data[i].data))
                                .attr( "title",data[i].name)
                            );
                            
                        }                        
                       $('#slider1').tinycarousel({buttons:false, interval:1000});
                    },
                    error : function(jqXHR, textStatus, errorThrown) {
                        alert("Errore");
                    }
                });
            });
			
		</script>
	</body>

</html>
